<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>巨幕页头缩略图和警告框组件</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<!--巨幕组件-->
<!--在固定的范围内,有圆角-->
<div class="container">
     <div class="jumbotron">
         <h2>网站标题</h2>
         <p>这是一个学习型的网站!</p>
         <p><a href="#" class="btn btn-default">更多内容</a></p>
     </div>
</div>

<!--100%全屏,没有圆角-->
<div class="jumbotron">
    <div class="container">
        <h2>网站标题</h2>
        <p>这是一个学习型的网站!</p>
        <p><a href="#" class="btn btn-default">更多内容</a></p>
    </div>
</div>


<!--页头组件-->
<div class="page-header">
    <h1>我是大标题</h1><small>我是小标题</small>
</div>



<!--缩略图组件-->
<!--缩略图配合响应式-->
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3 col-sm-4">
            <div class="thumbnail">
                <img src="img/timg.jpeg" alt="">
                <div class="caption">
                    <h3>图片</h3>
                    <p>关于这张图片的详情</p>
                    <p><a href="#" class="btn btn-default">快速进入</a></p>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-md-3 col-sm-4">
            <div class="thumbnail">
                <img src="img/timg.jpeg" alt="">
            </div>
        </div>
        <div class="col-xs-6 col-md-3 col-sm-4">
            <div class="thumbnail">
                <img src="img/timg.jpeg" alt="">
            </div>
        </div>
    </div>
</div>



<!--警告框组件-->
<!--基本警告框-->
<div class="alert alert-success">Bootstrap</div>
<div class="alert alert-info">Bootstrap</div>
<div class="alert alert-warning">Bootstrap</div>
<div class="alert alert-danger">Bootstrap</div>
<!--带关闭的警告框-->
<div class="alert alert-success">
    Bootstrap
    <button type="button" class="close" data-dismiss="alert">
        <span>&times;</span>
    </button>
</div>
<!--自动适配的超链接-->
<div class="alert alert-success">
    Bootstrap,请到官网<a href="#" class="alert-link">下载</a>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>